<template>
<div class="s">
    <div class="sp" v-for="(v,index) in arr" :key="index">
      <div class="left">
        <img :src="v.src" alt="">
      </div>
      <div class="right">
         <p>{{ v.txt }}</p>
         <span class="one">￥秒杀价</span>
         <span class="two">{{ v.price }}</span>
         <span class="three">立即抢购</span>
      </div>
  </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            arr: [
                 {
                     src: "https://pic.cdfgsanya.com/assets/upload/product/67f3bea83c840fee7d5b341d796be41a_400x400.png",
                     txt: "海蓝之谜经典精华面霜100ml 补水保湿滋润",
                     price:1200
                 },
                 {
                     src: "https://pic.cdfgsanya.com/assets/upload/product/5d2bc50e36bf03cad1c3f4ee2b2a5f30_400x400.jpg",
                     txt: "SK-II 护肤精华露 双瓶装 (神仙水精华 230ml*2)",
                     price:1139
                 },
                 {
                     src: "https://pic.cdfgsanya.com/assets/upload/product/e83b3d0a58922ed41a5eb3697a6d331c_400x400.jpg",
                     txt: "LA PRAIRIE莱珀妮 鱼子精华紧致精粹露150ml",
                     price:1988
                 },
                 {
                     src: "https://pic.cdfgsanya.com/assets/upload/product/7c6f43fb4f16045f0156d47e19368630_400x400.jpg",
                     txt: "雅诗兰黛特润修护肌活充盈紧弹眼霜两支装",
                     price:1677
                 },
                 {
                     src: "https://pic.cdfgsanya.com/assets/upload/product/056f46bd75f2f310e045160a0846aaf7_400x400.jpg",
                     txt: "Bobbi Brown 芭比波朗清透舒盈洁肤油双支装 400ml*2",
                     price:1200
                 },
                 {
                     src: "https://pic.cdfgsanya.com/assets/upload/product/056f46bd75f2f310e045160a0846aaf7_400x400.jpg",
                     txt: "雅诗兰黛特润修护肌活充盈紧弹眼霜两支装",
                     price:1999
                 },
                 {
                     src: "https://pic.cdfgsanya.com/assets/upload/product/547fd62a567d4de3a7e9eca16f88342b_400x400.jpg",
                     txt: "兰蔻极光水净澈焕肤双重精华水 250ml 抛光透亮",
                     price:1000
                 },
                 {
                     src: "https://pic.cdfgsanya.com/assets/upload/product/b2d484c876dd40d08837792d17d3d536_400x400.jpg",
                     txt: "修丽可植萃舒缓亮妍精华露（两瓶装） 色修精华",
                     price:999
                 },
                 {
                     src: "https://pic.cdfgsanya.com/assets/upload/product/e51d8185c5a5d27caeeead1453775e7c_400x400.jpg",
                     txt: "SK-II 护肤精华露 双瓶装 (神仙水精华 230ml*2)",
                     price:1788
                 },
                 {
                     src: "https://pic.cdfgsanya.com/assets/upload/product/a024fd2e6e4bfbb7e73c0e4dc17595be_400x400.png",
                     txt: "欧舒丹 甜蜜樱花润肤露500ml 轻柔保湿身体高光",
                     price:1456
                 },
             ],
        }
    }

}
</script>

<style scoped>
.s {
    background-color: #cdc3c3;
}
.sp {
    display: flex;
    width: 355px;
    height: 120px;
    background-color: #fff;
    margin: 10px;
    border-radius:10px ;
}
.sp .left {
    width: 110px;
    height: 110px;
}
.sp .left img{
    width: 100px;
    height: 100px;
    margin: 10px;
}
.sp .right p {
    font-size: 12px;
    font-weight: bold;
    margin: 20px ;
} 
.sp .right .one {
    margin-left: 20px;
    font-size: 12px;
    color: red;
}
.sp .right .two {
    font-size: 20px;
    color: red;
    font-weight: bold;
}
.sp .right {
    position: relative;
}
.sp .right .three {
    width: 80px;
    height: 30px;
    display: inline-block;

    background-color: red;
    border-radius:10px ;
    line-height: 30px;
    text-align: center;
    position:absolute;
    bottom: 50px;
    right: 10px;
    top: 70px;
    font-size: 14px;
    color: #fff;
}
</style>